<template>
  <div class="details" v-if="details">
    <div class="my-details">
      <van-swipe class="my-swipe" indicator-color="#000" @change="onChange">
        <van-swipe-item
          v-for="(item, index) in details.storeInfo.slider_image"
          :key="index"
        >
          <img :src="item" />
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">
            {{ current + 1 }}/{{ details.storeInfo.slider_image.length }}
          </div>
        </template>
      </van-swipe>
      <div class="detailsTop">
        <div class="money">
          <h4>￥{{ details.storeInfo.price }}</h4>
          <span
            >￥{{ details.storeInfo.vip_price }}
            <i class="fa fa-vimeo-square" aria-hidden="true"></i
          ></span>
        </div>
        <div class="title">
          <h3>{{ details.storeInfo.store_name }}</h3>
        </div>
        <div class="sales">
          <span>原价:￥{{ details.storeInfo.price }}</span>
          <span>库存:{{ details.storeInfo.stock }}</span>
          <span>销量:{{ details.storeInfo.fsales }}</span>
        </div>
      </div>
    </div>
    <div class="comment">
      <van-cell
        :title="`用户评价(${details.storeInfo.mer_use})`"
        is-link
        :value="`${details.storeInfo.mer_use}%好评`"
      />
    </div>
    <div class="excellent">
      <div class="text">
        <i class="icon lefticon"></i>
        <h3>优品推荐</h3>
        <i class="icon"></i>
      </div>
      <van-swipe indicator-color="white">
        <van-swipe-item>
          <van-grid :column-num="3" :loop="false">
            <van-grid-item
              v-for="(item, index) in details.good_list.slice(0, 6)"
              :key="index"
              :icon="item.image"
            >
              <template #text>
                <h5>{{ item.store_name }}</h5>
                <span>￥{{ item.price }}</span>
              </template>
            </van-grid-item>
          </van-grid>
        </van-swipe-item>
        <van-swipe-item>
          <van-grid :column-num="3">
            <van-grid-item
              v-for="(item, index) in details.good_list.slice(6, 12)"
              :key="index"
              :icon="item.image"
            >
              <template #text>
                <h5>{{ item.store_name }}</h5>
                <span>￥{{ item.price }}</span>
              </template>
            </van-grid-item>
          </van-grid>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="introduce">
      <div class="changpin">产品介绍</div>
      <div class="box" v-html="details.storeInfo.description"></div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" @click="$router.push({name:'Cart'})" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button
        type="warning"
        @click="addCart"
        text="加入购物车"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      @add-cart="onAddCartClicked"
    />
  </div>
</template>
<script>
import Cookies from "js-cookie";
export default {
  data() {
    return {
      details: null,
      current: 0,
      show: false,
      sku: {
        //初始化demo数据
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [],
        // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
        list: [],
        price: "5.00",
        stock_num: 227, // 商品总库存
        none_sku: false, // 是否无规格商品
        hide_stock: false, // 是否隐藏剩余库存
      },
      goods: {
        picture: "abfcb.jpg",
      },
      goodsId: 123,
      //添加购物车成功之有响应一个id值存起来
      carid:[]
    };

  },
  props: {
    detailID: [String, Number],
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    addCart() {
      this.show = true;
    },
    // 获取sku或完成以后添加购物车执行的函数
    onAddCartClicked(ee) {
      console.log(ee);
      if (!localStorage.getItem("token") || !Cookies.get("token")) {
        this.$dialog
          .alert({
            title: "提示",
            message: "请先登录",
          })
          .then(() => {
            // on close
            this.$router.push({name:'Login'})
            console.log(456);
          });

        return;
      } else {
        this.$toast("加入购物车成功")
        console.log("获取加购物车信息==->", ee);
        this.show = false;
        this.axios
          .post(
            "/cart/add",
            {
              cartNum: ee.selectedNum,
              new: 0,
              productId: ee.selectedSkuComb.goods_id,
              uniqueId: ee.selectedSkuComb.id,
            },
            {
              headers: {
                "Authori-zation": "Bearer " + localStorage.getItem("token"),
              },
            }
          )
          .then((re) => {
            console.log("购物车购物车购物车成功",re.cartId);
            this.carid.push(re.cartId)
          }); 
      }
    },
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.axios.get(`/product/detail/${vm.detailID}`).then((re) => {
        console.log("商品详情==>", re);
        vm.details = re;
      });
    });
  },
  created() {
    //  this.details= this.$router.query.id,
      this.axios.get(`/product/detail/${this.detailID}`).then((d) => {
      //获取产品属性里面第一个值默认图片
      this.goods.picture = d.storeInfo.image;
      if (d.productAttr.length < 1 && d.productValue.length < 1) {
        // console.log("1111");
        this.sku.list.push({
          goods_id: d.storeInfo.id,
          price: d.storeInfo.price * 100, //价格
          stock_num: d.storeInfo.stock, //库存
          s1: 1,
        });
        this.sku.tree.push({
          k: "款式", // skuKeyName：规格类目名称
          k_id: "款式",
          k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
          v: [
            {
              id: 1,
              name: "常规",
            },
          ],
        });
        // return
      } else {
        let arrs = d.productAttr;
        let listValue = d.productValue;
        //sku 数据转换
        let id = 1;
        let idobj = {};
        let ssk = 1;
        this.sku.list = [];
        this.sku.tree = arrs.map((atr, ads) => {
          let va = atr.attr_value.map((at, index) => {
            id++;
            idobj[at.attr] = id;
            let attrs = {
              id: id,
              name: at.attr,
            };
            if (ads > 0) {
              attrs.imgUrl = listValue[Object.keys(listValue)[index]].image;
            }
            return attrs;
          });
          var ks = "s" + ssk;
          ssk++;
          return {
            k: atr.attr_name,
            k_id: atr.attr_name,
            v: va,
            k_s: ks,
          };
        });
        //循环产品属性 组装购物车 属性tree
        console.log("sku.tree=>", this.sku.tree);
        //循环产品属性组合,组装sku 列表
        for (let key in listValue) {
          let v = listValue[key];
          let keys = key.split(",");
          this.sku.list.push({
            id: v.unique,
            price: v.price * 100, //价格
            s1: idobj[keys[0]],
            s2: idobj[keys[1]],
            stock_num: v.stock, //库存
            goods_id: v.product_id,
            imgUrl: v.image,
          });
        }
      }
      console.log("sku.list=>", this.sku.list);
    });
  },

  
};
</script>
<style lang="less">
.details {
  height: 100%;
  background-color: #eee;
  // padding-bottom: 50px;
  .my-details {
    background: #fff;
    .my-swipe {
      height: 60vh;
      .custom-indicator {
        position: absolute;
        right: 5px;
        bottom: 30px;
        padding: 5px 5px;
        font-size: 15px;
        background: rgba(255, 255, 255, 0.5);
        width: 20px;
        height: 10px;
        line-height: 10px;
        text-align: center;
      }
    }
    .van-swipe {
      .van-swipe__indicators {
        justify-content: center;
        bottom: -110px;
      }
    }
    .detailsTop {
      .money {
        h4 {
          display: inline-block;
          color: rgb(252, 65, 65);
          font-weight: bold;
          padding-left: 12px;
        }
        span {
          font-size: 15px;
          font-weight: bold;
        }
        .fa-vimeo-square {
          color: rgb(255, 215, 0);
        }
      }
      .title {
        h3 {
          font-size: 18px;
          padding: 15px;
          line-height: 140%;
          font-weight: bold;
        }
      }
      .sales {
        display: flex;
        justify-content: space-between;
        padding: 0px 20px 10px 20px;
        span {
          color: #888;
          font-size: 12px;
        }
      }
    }
  }
  .comment {
    margin: 10px 0px;
  }
  .excellent {
    background-color: #fff;
    .text {
      // text-align: center;
      display: flex;
      line-height: 50px;
      font-size: 16px;
      justify-content: center;
      align-items: center;
      h3 {
        padding: 0px 10px;
        color: rgb(252, 65, 65);
      }
      .icon {
        width: 15px;
        height: 15px;
        background-image: url("../assets/image/goodIcon.png");
        background-size: 15px 15px;
        background-repeat: no-repeat;
      }
    }
    .van-swipe {
      height: 100%;
    }
    .van-grid {
      .van-hairline--top::after {
        border: none;
      }
      .van-grid-item {
        .van-grid-item__content::after {
          border: none;
        }
        .van-grid-item__content {
          padding: 15px 8px;
        }
        .van-grid-item__content--center {
          align-items: flex-start;
        }
        .van-grid-item__icon {
          width: 100px;
          height: 100px;
        }
        h5 {
          font-size: 14px;
          line-height: 20px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          width: 109px;
        }
        span {
          font-size: 14px;
          line-height: 20px;
          color: rgb(252, 65, 65);
        }
      }
    }
  }
  .introduce {
    width: 100vw;
    .changpin {
      margin-top: 10px;
      width: 100%;
      height: 43px;
      line-height: 43px;
      text-align: center;
      background-color: #fff;
    }
    .box {
      #J_DcTopRightWrap {
        width: 100vw !important;
      }
      .col-main {
        width: 100vw !important;
      }
      #mainwrap {
        width: 100vw !important;
      }
      .skin-box-bd {
        width: 100vw !important;
      }
      img {
        width: 100% !important;
      }
      .content {
        width: 100vw !important;
        p {
          width: 100vw;
          margin: 0 !important;
        }
      }
    }
  }
 
}
</style>

